/**
 * 在这里写公用的class
 */
@use "./declare.scss";

// 占位符
.#{declare.$prefix}-place {
	width: 1px;
	height: 1px;
}

// 元素展示隐藏
.#{declare.$prefix}-show {
	display: initial;
}
.#{declare.$prefix}-hidden {
	 display: none !important;
}

/**
 * Flex 基础布局
 */
.#{declare.$prefix}-f-auto {
	@include declare.flex-base;
	flex: 1;
	overflow: hidden;
}
.#{declare.$prefix}-f-row {
	@include declare.flex-base;
	flex-direction: row;
}
.#{declare.$prefix}-f-row-end {
	@include declare.flex-base;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.#{declare.$prefix}-f-row-center {
	@include declare.flex-base;
	@include declare.flex-row-center;
}
.#{declare.$prefix}-f-row-center-jc {
	@include declare.flex-base;
	justify-content: center;
}
.#{declare.$prefix}-f-row-center-ai {
	@include declare.flex-base;
	align-items: center;
}
.#{declare.$prefix}-f-row-between {
	@include declare.flex-base;
	justify-content: space-between;
	align-items: center;
}
.#{declare.$prefix}-f-row-reverse {
	@include declare.flex-base;
	flex-direction: row-reverse;
	align-items: center;
}
.#{declare.$prefix}-f-col {
	@include declare.flex-base;
	flex-direction: column;
}
.#{declare.$prefix}-f-col-center {
	@include declare.flex-base;
	@include declare.flex-col-center;
}
/**
 * Flex 基础布局
 */

/**
 * 填充
 */
.#{declare.$prefix}-fill {
	@include declare.wh-fill;
}
.#{declare.$prefix}-full {
	@include declare.wh-full;
}
.#{declare.$prefix}-w-auto {
	width: auto;
}
.#{declare.$prefix}-w-fill {
	@include declare.width-fill;
}
.#{declare.$prefix}-w-fill-min {
	min-width: 100vw;
}
.#{declare.$prefix}-w-fill-max {
	max-width: 100vh;
}
.#{declare.$prefix}-w-full {
	@include declare.width-full;
}
.#{declare.$prefix}-w-full-min {
	min-width: 100%;
}
.#{declare.$prefix}-w-full-max {
	max-width: 100%;
}
.#{declare.$prefix}-h-auto {
	height: auto;
}
.#{declare.$prefix}-h-fill {
	@include declare.height-fill;
}
.#{declare.$prefix}-h-fill-min {
	min-height: 100vh;
}
.#{declare.$prefix}-h-fill-max {
	max-height: 100vh;
}
.#{declare.$prefix}-h-full {
	@include declare.height-full;
}
.#{declare.$prefix}-h-full-min {
	min-height: 100%;
}
.#{declare.$prefix}-h-full-max {
	max-height: 100%;
}
/**
 * 填充
 */


/**
 * 文字
 */
.#{declare.$prefix}-t-center {
	@include declare.text-center;
}
.#{declare.$prefix}-t-left {
	@include declare.text-left;
}
.#{declare.$prefix}-t-right {
	@include declare.text-right;
}
/**
 * 文字
 */

/**
 * 鼠标
 */
.#{declare.$prefix}-c-default {
	cursor: default;
}
.#{declare.$prefix}-c-pointer {
	cursor: pointer;
}
.#{declare.$prefix}-c-help {
	cursor: help;
}
.#{declare.$prefix}-c-move {
	cursor: move;
}
/**
 * 鼠标
 */

/**
 * 浮动
 */
.#{declare.$prefix}-fl {
	float: left;
}
.#{declare.$prefix}-fr {
	float: right;
}
.#{declare.$prefix}-clearfix:before,
.#{declare.$prefix}-clearfix:after {
	display: table;
	content: "";
}
.#{declare.$prefix}-clearfix:after {
	clear: both;
}
/**
 * 浮动
 */

//@while $i > 0 {
//	$i: $i - 1;
//}
/**
 * 边距
 */
@for $i from 1 to 500 {
	// 宽高
	.#{declare.$prefix}-wh-#{$i} {
		width: #{$i}px;
		height: #{$i}px;
	}
	.#{declare.$prefix}-w-#{$i} {
		width: #{$i}px;
	}
	.#{declare.$prefix}-h-#{$i} {
		height: #{$i}px;
	}
	// 外边距
	.#{declare.$prefix}-m-#{$i} {
		margin: #{$i}px;
	}
	.#{declare.$prefix}-my-#{$i} {
		margin-top: #{$i}px;
		margin-bottom: #{$i}px;
	}
	.#{declare.$prefix}-mx-#{$i} {
		margin-left: #{$i}px;
		margin-right: #{$i}px;
	}
	.#{declare.$prefix}-mt-#{$i} {
		margin-top: #{$i}px;
	}
	.#{declare.$prefix}-mr-#{$i} {
		margin-right: #{$i}px;
	}
	.#{declare.$prefix}-mb-#{$i} {
		margin-bottom: #{$i}px;
	}
	.#{declare.$prefix}-ml-#{$i} {
		margin-left: #{$i}px;
	}
	// 内边距
	.#{declare.$prefix}-p-#{$i} {
		padding: #{$i}px;
	}
	.#{declare.$prefix}-py-#{$i} {
		padding-top: #{$i}px;
		padding-bottom: #{$i}px;
	}
	.#{declare.$prefix}-px-#{$i} {
		padding-left: #{$i}px;
		padding-right: #{$i}px;
	}
	.#{declare.$prefix}-pt-#{$i} {
		padding-top: #{$i}px;
	}
	.#{declare.$prefix}-pr-#{$i} {
		padding-right: #{$i}px;
	}
	.#{declare.$prefix}-pb-#{$i} {
		padding-bottom: #{$i}px;
	}
	.#{declare.$prefix}-pl-#{$i} {
		padding-left: #{$i}px;
	}
}
/**
 * 边距
 */

/**
 * 定位
 */
.#{declare.$prefix}-pos-ft {
	position: fixed;
	top: 0;
}
.#{declare.$prefix}-pos-fb {
	position: fixed;
	bottom: 0;
}
.#{declare.$prefix}-pos-fl {
	position: fixed;
	left: 0;
}
.#{declare.$prefix}-pos-fr {
	position: fixed;
	right: 0;
}
.#{declare.$prefix}-zi-max {
	z-index: 99999;
}
.#{declare.$prefix}-zi-min {
	z-index: -1;
}

@for $i from 1 through 99999 {
	.#{declare.$prefix}-zi-#{$i} {
		z-index: #{$i};
	}
}

//$sizes: 40px, 50px, 80px;
//$sizes: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
//@each $size in $sizes {
//	.#{declare.$prefix}-zi-#{$size} {
//		z-index: #{$size};
//	}
//}

//@function scale-below($value, $base, $ratio: 1.618) {
//	@while $value > $base {
//		$value: math.div($value, $ratio);
//	}
//	@return $value;
//}
/**
 * 定位
 */

// default PC
.screen-pc {
	display: block;
}
.screen-pad {
	display: none;
}
.screen-mobile {
	display: none;
}
// Large
@media screen and (min-width: 1200px) {}
// Normal
@media screen and (min-width: 992px) and (max-width: 1200px) {}
// Pad
@media screen and (min-width: 768px) and (max-width: 992px) {}
// Mobile
@media screen and (max-width: 768px) {
	.screen-pc {
		display: none;
	}
	.screen-pad {
		display: none;
	}
	.screen-mobile {
		display: block;
	}
}
